<template>
	<view>
		<view class="cont">
			<view class="t1">
				设置密码
			</view>
			<view class="t2">
				设置登录密码，您可以用手机号+密码登录
			</view>
			
			<view class="items" >
				<view class="tl">
					手机号
				</view>
				<view class="tr" style="border: none;">
					{{userinfo.shopPhone}}
				</view>
			</view>
			<view class="items">
				<view class="tl">
					新密码
				</view>
				<view class="tr">
					<input v-model="params.pwd" :password="isshow" type="text" placeholder="填写新密码" />
					<uni-icons @click="isshow=!isshow" :type="isshow?'eye-slash':'eye'" size="23" color="#979797"></uni-icons>
				</view>
			</view>
			<view class="items" >
				<view class="tl">
					确认密码
				</view>
				<view class="tr">
					<input v-model="params.confirmPwd" :password="isshow1" type="text" placeholder="再次填写确认" />
					<uni-icons @click="isshow1=!isshow1" :type="isshow1?'eye-slash':'eye'" size="23" color="#979797"></uni-icons>
				</view>
			</view>
			
			<view class="inputs">
				<view class="tl">
					验证码
				</view>
				<view class="t_r">
					<input v-model="params.code"  type="number" placeholder="请输入验证码"/>
					<view class="tr" @click="getPhonecode">
						{{codeBtn.codeText}}
					</view>
				</view>
			</view>
			<view class="ts">
				请输入6-16位密码，支持数字及符号
			</view>
			
		</view>
		<view class="footerbtn" >
			<view class="cont">
				<view class="btn" @click="handleBc">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setPassword,getCode
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				userinfo:uni.getStorageSync('userinfo'),
				params:{
					pwd:'',
					confirmPwd:'',
					code:"",
				},
				isshow:true,
				isshow1:true,
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
			};
		},
		methods:{
			getPhonecode() {
				if (this.codeBtn.codeStatus) {
					getCode({
						phone: this.userinfo.shopPhone
					}).then(res => {
						console.log(res);
						if(res.code == 200){
							this.codeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = this.codeBtn.codeTime
								codetime--
								this.codeBtn.codeTime = codetime
								this.codeBtn.codeText = codetime + "s后重新发送"
								if (codetime < 1) {
									clearInterval(timerId)
									this.codeBtn.codeText = "重新获取"
									this.codeBtn.codeTime = 60
									this.codeBtn.codeStatus = true
								}
							}, 1000)
						}
					})
					
				}
			
			},
			gopage(){
				
			},
			handleBc(){
				if(this.params.pwd == ''){
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
					return
				}
				if(this.params.confirmPwd ==''){
					uni.showToast({
						icon:'none',
						title:'请再次输入密码'
					})
					return
				}
				if(this.params.pwd != this.params.confirmPwd){
					uni.showToast({
						icon:'none',
						title:'两次密码不一致，请检查'
					})
					return
				}
				if(this.params.code ==''){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
					return
				}
				setPassword(this.params).then(res=>{
					console.log(res);
					if(res.code == 200){
						uni.showToast({
							icon:'none',
							title:'密码已修改,请重新登陆'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/login/login'
							})
						},1000)
					}
				})
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBFBFB;
	}
	.cont{
		padding: 64rpx 60rpx;
		.t1{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 52rpx;
			color: #000000;
		}
		.t2{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-bottom: 88rpx;
		}
		.items{
			display: flex;
			margin-bottom: 54rpx;
			input{
				font-size: 28rpx;
			}
			.tr{
				flex: 1;
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 30rpx;
				justify-content: space-between;
			
			}
			.tl{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				width: 140rpx;
			}
		}
		.ts{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
		}
		
	}
	.inputs{
		display: flex;
		justify-content: space-between;
		.tl{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			width: 140rpx;
		}
		.t_r{
			flex: 1;
			display: flex;
			padding-bottom: 30rpx;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34rpx;
		}
		input{
			font-size: 28rpx;
			flex: 1;
		}
		.tr{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-decoration-line: underline;
		}
		
	}
	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	
		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;
			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}
			.absbtn{
				background: #808080;
			}
		}
	}
</style>
